import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  ScrollView,
} from 'react-native';
import BaseUrl from '../../config/BaseUrl';
// import SearchHeadIcon from '../../components/SearchHeadIcon';
import {getNewsList} from '../../service/home';
import {getTreelist} from '../../service/common';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import Search from '../../components/Search';

const Home = () => {
  const navigation = useNavigation();
  const [newList, setNewList] = useState([]);
  const [treelist, setTreelist] = useState([]);
  const [nodeId, setNodeId] = useState("");
  useEffect(() => {
    // navigation.setOptions({
    //   title: '资讯',
    //   headerRight: () => <SearchHeadIcon navigation={navigation} />,
    // });
    getTreelist({type:1006}).then((res)=>{
      console.log(res);
      setTreelist(res.data);
      setNodeId(res.data[0].nodeId);

      getNewsList({artType:res.data[0].nodeId}).then((res2)=>{
        setNewList(res2.rows);
      });
    });
  }, []);

  const sendCommentFn = (val) => {
    // console.log(`开始搜索${val}`);
    getNewsList({artTitle:val}).then((res2)=>{
      setNewList(res2.rows);
    });
  };
  return (
    <AreaView>
      <Search onSend={sendCommentFn} />
      <View style={styles.tabs_container}>
      {(treelist || []).map((item) => (
        <TouchableOpacity  activeOpacity={1} style={styles.btn}
          onPress={() => {
            setNodeId(item.nodeId);
            getNewsList({artType:item.nodeId}).then((res)=>{
              console.log(res);
              setNewList(res.rows);
            });
          }}
        >
          <Text style={[styles.btn_text, nodeId===item.nodeId && styles.btn_text_selected]}>
            {item?.nodeName}
          </Text>
          { nodeId===item.nodeId && 
            <View style={styles.selected} />
          }
        </TouchableOpacity>
      ))}
        {/* <TouchableOpacity  activeOpacity={1} style={styles.btn}>
          <Text style={styles.btn_text}>政策要问</Text>
        </TouchableOpacity>
        <TouchableOpacity  activeOpacity={1} style={styles.btn}>
          <Text style={styles.btn_text}>行业要点</Text>
        </TouchableOpacity>
        <TouchableOpacity  activeOpacity={1} style={styles.btn}>
          <Text style={styles.btn_text}>新闻动态</Text>
        </TouchableOpacity> */}
      </View>
      <ScrollView showsVerticalScrollIndicator={false} style={styles.container}>
        <View style={styles.new_container}>
        {(newList || []).map((item) => (
          <TouchableOpacity  activeOpacity={1} style={styles.new_list_one_img} onPress={() => navigation.push('NewsDetail',{
            artId: item?.artId
          })}>
            <Image style={styles.new_cover} 
              source={{uri: BaseUrl.imgurl + item?.coveImage}}
            />
            <View style={styles.new_info}>
              <Text numberOfLines={2} style={styles.new_title}>
                {item?.artDesc}
              </Text>
              <Text style={styles.new_time}>{item?.createTime}</Text>
            </View>
          </TouchableOpacity>
        ))}
          {/* <TouchableOpacity  activeOpacity={1} style={styles.new_list_more_img}>
            <Text numberOfLines={2} style={styles.new_title}>
              大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系
            </Text>
            <View style={styles.more_img_container}>
              <Image style={styles.new_cover} />
              <Image style={styles.new_cover} />
              <Image style={styles.new_cover} />
            </View>
            <Text style={styles.new_time}>2021-03-26 11：53：21</Text>
          </TouchableOpacity>
          <TouchableOpacity  activeOpacity={1} style={styles.new_list_one_img}>
            <View style={styles.new_info_no_img}>
              <Text numberOfLines={2} style={styles.new_title}>
                大卫·霍克尼成为最贵艺术家，艺术家和拍卖行到底是什么关系
              </Text>
              <Text style={styles.new_time_no_img}>2021-03-26 11：53：21</Text>
            </View>
          </TouchableOpacity> */}
        </View>
      </ScrollView>
    </AreaView>
  );
};

export default Home;
